<template>
	<el-container>
		<el-header style="height: auto;justify-content: left;">
			<div class="u-m-r-15">
				<Store></Store>
			</div>
			<div class="u-flex-1">
				<sc-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></sc-select-filter>
			</div>
			<div class="u-flex-1">
				<el-date-picker v-model="trendValue1" type="daterange" :disabled-date="disabledDate" range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
			</div>
		</el-header>
		<el-main class="">
			<div>
				<div class="u-font-blod u-font-20 u-m-b-20">区域分析</div>
				<div>
					<el-row :gutter="15">
						<el-col :lg="4">
							<svg data-v-5d581d44="" data-v-03b8e72b="" aria-hidden="true" class="svg-icon">
								<use data-v-5d581d44="" xlink:href="#icon-hotAreaFire"></use>
							</svg>
						</el-col>
					</el-row>
				</div>
			</div>
			<div>
				<el-card shadow="never">
					<div class="u-font-blod u-font-20 u-m-b-20"></div>
					<scEcharts height="300px" :option="option"></scEcharts>
				</el-card>
			</div>
		</el-main>
	</el-container>
</template>

<script>
	import scStatistic from '@/components/scStatistic'
	import scSelectFilter from '@/components/ShowTabData'
	import scEcharts from '@/components/scEcharts'
	export default {
		name: 'statistic',
		components: {
			scStatistic,
			scSelectFilter,
			scEcharts
		},
		data() {
			return {
				trendValue1: 7.7,
				trendValue2: -18.9,
				radio2: '进店客流',
				type: '1',


				filterData: [{
					title: "",
					key: "type",
					options: [{
							label: "本周",
							value: ""
						},
						{
							label: "上周",
							value: "1"
						},
						{
							label: "近三十日",
							value: "3"
						},
					]
				}, ],
			}
		},
		mounted() {

		},
		methods: {
			filterChange(data) {
				this.$refs.table.upData(data)
			}
		}
	}
</script>

<style scoped>
	.el-card {
		margin-bottom: 15px;
	}

	.up {
		color: #F56C6C;
		margin-left: 5px;
	}

	.down {
		color: #67C23A;
		margin-left: 5px;
	}
</style>